<template>
  <view class="content-item" @click="handleToDetail">
    <view class="item-top">
      <image class="item-img" :src="item.bannerUrl"></image>
      <view class="item-info">
        <view class="item-title u-line-1">{{item.activityName}}</view>
        <view class="item-des u-line-1">{{item.activityIntroduce}}</view>
        <view class="item-tags">
          <template v-for="(tag, index) in item.activityTags">
            <text class="tag" v-if="tag" :key="index">{{tag}}</text>
          </template>
        </view>
        <!-- <view>
          <text class="price">{{item.activityPrice}}元</text>
          <text class="icon icon-vip-free"></text>
        </view> -->
        <view class="item-view-count u-line-1">{{item.fakeActivityViewNum}}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { reqAppAddBrowseRecord } from "@/api/modules/report";

export default {
  props: {
    type: {
      type: String,
      default: "",
    },
    item: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
    };
  },
  methods: {
    handleToDetail() {
      let params = {
        mpaActivityId: this.item.activityIdCode,
        activityName: this.item.activityName,
        activityDesc: this.item.activityIntroduce,
        browsePersonId: this.personId,
        moduleType: "OCCUPATION_MODULE_TYPE",
      };
      reqAppAddBrowseRecord(params, this.personId);
      uni.navigateTo({
        url:
          "/pagesSub/companyCenter/report/detail?id=" +
          this.item.activityIdCode,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content-item {
  margin: 0 32rpx 16rpx 32rpx;
  padding: 16rpx 28rpx 24rpx 28rpx;
  border-radius: 16rpx;
  background-color: #ffffff;

  .item {
    &-top {
      display: flex;
    }

    &-img {
      flex-shrink: 0;
      margin-top: 4rpx;
      margin-right: 32rpx;
      width: 154rpx;
      height: 168rpx;
      border-radius: 8rpx;
    }

    &-info {
      flex: 1;
      width: 0;
    }

    &-title {
      margin-bottom: 6rpx;
      font-size: $uni-font-size-lg;
      font-weight: 500;
      color: #222222;
    }

    &-des {
      margin-bottom: 6rpx;
      // height: 36rpx;
      font-size: $uni-font-size-nor;
      color: #979a9d;
    }

    &-tags {
      // height: 48rpx;
      .tag {
        display: inline-block;
        margin-bottom: 8rpx;
        margin-right: 16rpx;
        padding: 0 12rpx;
        height: 38rpx;
        line-height: 38rpx;
        border-radius: 4rpx;
        font-size: $uni-font-size-min;
        color: #555555;
        background-color: #f5f5f5;
      }
    }
    &-view-count {
      // margin-top: 10rpx;
      font-size: 24rpx;
      color: #979a9d;
    }
  }

  .icon-vip-free {
    width: 98rpx;
    height: 20rpx;
    background-image: url($img-base + "vip/vip-free.png");
    vertical-align: baseline;
  }

  .price {
    margin-right: 12rpx;
    color: #ff9159;
  }

  .free {
    font-size: $uni-font-size-sm;
    color: #538efa;
  }

  .content {
    margin-bottom: 22rpx;
    font-size: $uni-font-size-sm;
    color: #bfbfbf;
  }
}
</style>